window.onload = function(){/*  页面加载完了以后 在执行onload里面的方法  */
	let left = document.querySelector(".login-head-left");
	let right = document.querySelector(".login-head-right");
	let loginScan = document.querySelector(".login-scan");
	let loginPhone = document.querySelector(".login-phone");
	
	let mydivRepeat = document.querySelector(".mydiv-repeat");
	let imgID = document.querySelector("img-id");
	
	let area = document.querySelector(".area");
	let inputPhone = document.querySelector(".input-phone");
	let inputPassword = document.querySelector(".input-password");
	let formButton = document.querySelector(".form-button");
	
	let loginNull = document.querySelector(".login-null");
	let phoneNull = document.querySelector(".phone-null");
	let passwordNull = document.querySelector(".password-null");
	let phoneForm = document.querySelector(".phone-form");
	
	/* 切换登录方式*/
	left.onclick = function (){
		loginScan.style.display = "block";
		left.style.color =" #38adff";
		left.style.borderBottom = "4px solid #38adff";
		loginPhone.style.display = "none";
		right.style.color =" #898d90 ";
		right.style.borderBottom = "1px solid #e8e8e8";
	}
	right.onclick = function (){
		loginScan.style.display = "none";
		left.style.color =" #898d90 ";
		left.style.borderBottom = "1px solid #e8e8e8";
		loginPhone.style.display = "block";
		right.style.color =" #38adff";
		right.style.borderBottom = "4px solid #38adff";
	}
	
	/* 点击刷新二维码 */
	let count = 0;
	let img0 = document.querySelectorAll(".img0");
	mydivRepeat.onclick = function (){
		img0[count].style.display = "none";
		count++;
		if( count > 2 ){
			count = 0;
		}
		img0[count].style.display = "block";
	}
	
	/* 点击获取地区号 */
	let selectUl = document.querySelector(".select-ul");
	let lis = document.getElementsByTagName("li");
	let is = document.querySelectorAll("i");
	area.onclick = function(){
		selectUl.style.display = "block";
	}
	for( let i = 0; i < lis.length; i++){
		/* 鼠标移入事件 */
		lis[i].onmouseover =function(){
			this.style.backgroundColor = "#38adff";
			this.style.color = "#ffffff";
		}
		/* 鼠标移出事件 */
		lis[i].onmouseout =function(){
			this.style.backgroundColor = "#fff";
			this.style.color = "#252525";
		}
		/* 点击事件 */
		lis[i].onclick = function(){
			area.innerText = is[i].innerText;
			selectUl.style.display = "none";
		}
		
	}
	let reg = /1[0-9]{10}/;
	/* 点击input框添加边框 判断点击的框 */
	inputPhone.onclick = function(){
		inputPhone.style.border = "3px solid #000000";
		inputPhone.style.borderRadius = "4px";
		inputPassword.style.border = "1px solid #e8e8e8";
		formButton.style.border = "1px solid #e8e8e8";
		selectUl.style.display = "none";
	}
	inputPassword.onclick = function(){
		inputPassword.style.border = "3px solid #000000";
		inputPassword.style.borderRadius = "4px";
		inputPhone.style.border = "1px solid #e8e8e8";
		formButton.style.border = "1px solid #e8e8e8";
	}
	formButton.onclick = function(){
		formButton.style.border = "3px solid #000000";
		formButton.style.borderRadius = "4px";
		inputPhone.style.border = "1px solid #e8e8e8";
		inputPassword.style.border = "1px solid #e8e8e8";
		/* 根据内容出现提示框 */
		if (inputPhone.value == '') {
			loginNull.style.display = "block";
			phoneNull.style.display = "block";
			passwordNull.style.display = "none";
			phoneForm.style.display = "none";
		}else if (inputPassword.value == '') {
				loginNull.style.display = "block";
				passwordNull.style.display = "block";
				phoneNull.style.display = "none";
				phoneForm.style.display = "none";
		}else if(!reg.test(inputPhone.value)){
		loginNull.style.display = "block";
		phoneForm.style.display = "block";
		phoneNull.style.display = "none";
		passwordNull.style.display = "none";
		}
		else{
			window.location.href='homePage.html';
		}
		
		/* 三秒后提示消失 */
		 window.setTimeout(()=>{
			loginNull.style.display = "none"; 
		 },3000)
	}
	/* 聚焦事件 */
	/* inputPhone.onfocus = function(){
		inputPhone.style.border = "3px solid #000000";
	} */
	/* 失焦事件 */
	inputPhone.onblur = function(){
		inputPhone.style.border = "1px solid #e8e8e8";
	}
	inputPassword.onblur = function(){
		inputPassword.style.border = "1px solid #e8e8e8";
	}
	formButton.onblur = function(){
		formButton.style.border = "1px solid #e8e8e8";
	}
}
	